<template>
  <div id="turntable_bg">
    <div class="wrapper typo" id="wrapper">
      <section id="turntable" class="gb-turntable">
        <div class="gb-turntable-container">
          <canvas class="gb-turntable-canvas" width="300" height="300px">抱歉！浏览器不支持。</canvas>
        </div>
        <a id="go_btn" class="gb-turntable-btn disabled" href="javascript:;" style="cursor:pointer">GO</a>
      </section>
    </div>
    <p class="chance">每个用户仅限一次机会</p>
    <a class="log" @click="popup.show=true">点击查看我的中奖纪录></a>
    <box class="go-btn-box">
      <x-button id="start" class="go-btn" @click.native="start" :disabled="btn.disabled">开始
      </x-button>
    </box>

    <div v-transfer-dom>
      <popup v-model="popup.show" @on-show="log" max-height="50%">
        <div class="popup0">
          <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;">
            <thead>
            <tr style="background-color: #F7F7F7">
              <th>奖品</th>
              <th>时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in resultList">
              <td>{{item.prize.name}}</td>
              <td>{{item.updated_at}}</td>
            </tr>
            </tbody>
          </x-table>
        </div>
      </popup>
    </div>

    <div v-transfer-dom>
      <div v-show="noPrizeShow" class="result" @click="noPrizeShow=false">
        <img src="../assets/images/turntable/no-prize.png" class="no-prize">
      </div>
      <div v-show="prizeShow" class="result" @click="prizeShow=false">
        <img src="../assets/images/turntable/prize.png" class="prize">
        <p class="p-name">{{prize}}</p>
        <p class="p-text">恭喜你获得{{prize}}</p>
      </div>
    </div>

    <div v-transfer-dom>
      <div v-show="notStartShow" class="not-start">
        <img src="../assets/images/turntable/not-start.png" class="not-start-img">
      </div>
    </div>
  </div>
</template>

<script>
  import '../assets/js/GB-canvas-turntable'
  import {XButton, Box, Group, Cell, TransferDom, Popup, XTable} from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      Box,
      Group,
      Cell,
      TransferDom,
      Popup,
      XTable
    },
    data() {
      return {
        btn: {
          disabled: false
        },
        canGo: false,
        popup: {
          show: false
        },
        noPrizeShow: false,
        prizeShow: false,
        prizeList: {
          prizeNameList: [],
          prizeIdList: []
        },
        user: '',
        wheelId: '', // 活动id
        goId: '', // 期数id
        userId: '', // 用户id
        ifPrize: false,
        prize: '',
        resultList: [],
        notStartShow: false
      }
    },
    mounted: function () {
      this.user = JSON.parse(localStorage.getItem('USER'))
      this.userId = this.user.id
      // 获取奖品列表
      this.$http.get('/api/wheels').then(response => {
        const id = response.data.wheels[0].id
        this.$http.get('/api/wheel/show/' + id).then(response => {
          if (response.data.wheel.wheel_gos.length !== 0) {
            this.wheelId = response.data.wheel.id
            this.goId = response.data.wheel.wheel_gos[0].id
            for (let item of response.data.wheel.prizes) {
              this.prizeList.prizeNameList.push(item.name)
              this.prizeList.prizeIdList.push(item.id)
            }
            let $$this = this
            $$this.canGo = true
            /* eslint-disable */
            gbTurntable.init({
              id: 'turntable',
              config: function (callback) {
                // 获取奖品信息
                callback && callback($$this.prizeList.prizeNameList);
              },
              getPrize: function (callback) {
                $$this.$http.post('/api/wheel/luck', {
                  wheel_id: $$this.wheelId,
                  go_id: $$this.goId,
                  user_id: $$this.userId
                }).then(response => {
                  // 获取中奖信息
                  const num = $$this.prizeList.prizeIdList.indexOf(response.data.winPrize.id),   //奖品ID
                    chances = 1;  // 可抽奖次数
                  if (num === $$this.prizeList.prizeIdList.length - 1) {
                    $$this.ifPrize = false
                  } else {
                    $$this.ifPrize = true
                  }
                  callback && callback([num, chances]);
                }, response => {
                  $$this.btn.disabled = false
                  $$this.$vux.toast.show({
                    text: '活动暂未开始或已抽过奖',
                    type: 'text'
                  })
                })
              },
              gotBack: function (data) {
                $$this.prize = data
                if ($$this.ifPrize) {
                  $$this.prizeShow = true
                  $$this.btn.disabled = false
                } else {
                  $$this.noPrizeShow = true
                  $$this.btn.disabled = false
                }
              }
            });
            /* eslint-enable */
          } else {
            this.notStartShow = true
          }
        }, response => {
          console.log(response)
        })
      }, response => {
        console.log(response)
      })
    },
    methods: {
      start() {
        if (!this.canGo) {
          this.$vux.toast.show({
            text: '每个用户仅限一次机会哦~',
            type: 'text'
          })
        } else {
          this.btn.disabled = true
          const u = navigator.userAgent
          if (u.indexOf('iPhone') > -1) {
            // 苹果手机
            console.log(document.getElementById('go_btn').click())
            document.getElementById('go_btn').click()
          } else {
            // winphone手机
            document.getElementById('go_btn').click()
          }
          this.canGo = false
        }
      },
      log() {
        this.$http.post('/api/wheel/my/luck', {
          wheel_id: this.wheelId,
          user_id: this.userId
        }).then(response => {
          this.resultList = response.data.lucks
        })
      }
    }
  }
</script>

<style scoped>
  @import "../assets/css/typo/typo.css";
  @import "../assets/css/GB-canvas-turntable.css";

  #turntable_bg {
    width: 100%;
    height: 100%;
    background: url("../assets/images/turntable/turntable-bg.jpg");
    background-size: 100% 100%;
    overflow: hidden;
  }

  #wrapper {
    padding-top: 40%;
  }

  .go-btn-box {
    width: 80%;
    position: absolute;
    bottom: 5%;
    left: 10%;
  }

  .go-btn {
    width: 80%;
    height: 4rem;
    line-height: 4rem !important;
    font-size: 2rem !important;
    background: #e30000 !important;
    color: #fff !important;
    font-weight: bold;
    letter-spacing: 2rem;
    text-indent: 2rem;
  }

  .chance {
    width: 100%;
    position: absolute;
    top: 17%;
    text-align: center;
    color: #e30000;
    font-weight: bold;
  }

  .log {
    width: 100%;
    position: absolute;
    bottom: 17%;
    text-align: center;
    color: #e30000;
    font-weight: bold;
  }

  .result {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .8);
    text-align: center;
  }

  .prize, .no-prize {
    margin-top: 30%;
    max-width: 90%;
    max-height: 50%;
  }

  .p-name {
    width: 100%;
    position: absolute;
    top: 36.5%;
    color: #ec4d35;
    font-size: 1.3rem;
    font-weight: bold;
  }

  .p-text {
    width: 100%;
    position: absolute;
    top: 59.5%;
    color: #d97c00;
    font-size: 1rem;
  }

  .not-start {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, .8);
  }

  .not-start-img {
    max-width: 90%;
    max-height: 100%;
    margin-top: 70%;
  }
</style>
